<template>
  <div>
    <div id="chart_id"></div>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
let My_chart = null;
export default {
  props: {
    data: Array,
  },
  setup(props) {
    const state = reactive({
      info: [],
    });
    onMounted(() => {
      setTimeout(() => {
        state.info = props.data;
        getMy_chart();
      }, 500);
    });
    //底部折线
    const getMy_chart = () => {
      let list = state.info;
      let x = [];
      let y = [];
      let numXy = [];
      list.forEach((i) => {
        x.push(i.pass);
        y.push(i.percent);
        numXy.push(i.num);
      });
      My_chart = window.echarts.init(document.getElementById("chart_id"));
      var getname = x;
      var getvalue = y;
      var getvalue1 = numXy;
      //计算最大值
      var maxnum = Math.max.apply(null, getvalue);
      var maxnum1 = Math.max.apply(null, getvalue1);
      var maxlen = Math.pow(10, String(Math.ceil(maxnum)).length - 2);
      var maxlen1 = Math.pow(10, String(Math.ceil(maxnum1)).length - 2);
      var num = 0;
      if (maxnum >= 5) {
        var max = Math.ceil(maxnum / (10 * maxlen)) * maxlen * 10;
      } else {
        var max = 5;
      }
      if (maxnum1 >= 5) {
        var max1 = Math.ceil(maxnum1 / (10 * maxlen1)) * maxlen1 * 10;
      } else {
        var max1 = 5;
      }
      let option = {
        backgroundColor: "#072685",
        grid: {
          top: "21%",
          right: "8%",
          left: "8%",
          bottom: "16%",
        },

        xAxis: [
          {
            data: getname,
            axisLabel: {
              margin: 10,
              color: "#82AFC6",
              textStyle: {
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#102E74",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: max, // 计算最大值
            interval: max / 5, // 平均分为5份
            splitNumber: 5,
            name: "",
            nameTextStyle: {
              color: "#82AFC6",
              fontSize: 12,
              padding: [0, 0, -8, 100],
            },
            axisLabel: {
              formatter: function (value) {
                num = value;
                if (num && num != "undefined" && num != "null") {
                  let numS = num;
                  numS = numS.toString();
                  numS = numS.replace(/,/gi, "");
                  return numS;
                } else {
                  return num;
                }
              },
              color: "#82AFC6",
              textStyle: {
                fontSize: 12,
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#3E5B7D",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#102E74",
              },
            },
          },
          {
            type: "value",
            min: 0,
            max: max1, // 计算最大值
            interval: max1 / 5, // 平均分为5份
            splitNumber: 5,
            name: "",
            nameTextStyle: {
              color: "#82AFC6",
              fontSize: 12,
              padding: [0, 0, -8, -100],
            },
            axisLabel: {
              formatter: function (value) {
                num = value;
                if (num && num != "undefined" && num != "null") {
                  let numS = num;
                  numS = numS.toString();
                  numS = numS.replace(/,/gi, "");
                  return numS;
                } else {
                  return num;
                }
              },
              color: "#82AFC6",
              textStyle: {
                fontSize: 12,
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#3E5B7D",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#102E74",
              },
            },
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            data: getvalue,
            barWidth: "15px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#1D82FF",
                    },
                    {
                      offset: 1,
                      color: "#00FFF6",
                    },
                  ],
                  false
                ),
                barBorderRadius: [4, 4, 0, 0],
              },
            },
          },
          {
            name: "金额",
            type: "line",
            data: getvalue1,
            smooth: true,
            symbol: "none",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(255, 227, 168, 0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(255, 227, 168, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 227, 168, 0)",
                    },
                  ]),
                  shadowColor: "rgba(255, 120, 0,1)",
                  shadowBlur: 8,
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(197, 106, 255, 0.6)",
                    },
                    {
                      offset: 0.6,
                      color: "rgba(255, 120, 0, 0)",
                    },
                  ]),
                },
              },
            },
          },
        ],
      };

      My_chart.setOption(option);
    };
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang='scss' scoped>
#chart_id {
  width: 100%;
  height: 310px;
}
</style>